<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="请输入用户ID"
      />
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        id="anchorListFirst"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 330px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="发起者ID">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.fromUser" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="发起者性别">
          <template slot-scope="{ row }">{{ row.fromGender | gender }}</template>
        </el-table-column>
        <el-table-column align="center" label="发起者在线状态" prop="fromStatus">
          <template slot-scope="{ row }">{{ online_status_items[row.fromStatus] ? online_status_items[row.fromStatus]: '离线' }}</template>
        </el-table-column>
        <el-table-column align="center" label="发起者最大鉴黄分数" prop="fromRate">
        </el-table-column>
        <el-table-column align="center" label="发起者触发违规次数" prop="fromIllegal" />
        <el-table-column align="center" label="接受者ID">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.toUser" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="接受者性别" prop="toGender">
          <template slot-scope="{ row }">{{ row.toGender | gender }}</template>
        </el-table-column>
        <el-table-column align="center" label="接受者在线状态" prop="toStatus">
          <template slot-scope="{ row }">{{ online_status_items[row.toStatus] ? online_status_items[row.toStatus]: '离线' }}</template>
        </el-table-column>
        <el-table-column align="center" label="接受者触发违规次数" prop="toIllegal" />
        <el-table-column align="center" label="发起时间" prop="startTime">
          <template slot-scope="{ row }">{{ row.startTime | parseTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="最后一条时间" prop="endTime">
          <template slot-scope="{ row }">{{ row.endTime | parseTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="聊天条数" prop="chatNumber" />
        <el-table-column align="center" label="已消耗" prop="consumed" />
        <el-table-column align="center" label="已获得积分" prop="integral" />
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              @click="onCahtItem(row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
      <el-dialog
        v-loading="dialogLoading"
        title="聊天详情"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <div v-if="chatDetail" class="detail-box">
          <div v-for="(item, index) in chatDetail" :key="index" class="list-item" style="width: 70%;">
            <div class="item-name">
              <div v-if="item.fromGender === 1" class="comment_item" style="display: inline-block; left: 50px;">
                <el-avatar :size="40" :src="item.content" style="display: inline-block; left: 20px; position: absolute;">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
                </el-avatar>
                <div class="comment_content" style="display: inline-block; left: 70px; width: 75%;">
                  <span style="display: block; padding-bottom: 6px;">{{ item.fromUser }}</span>
                  <span v-if="item.replayUserNickname">回复 {{ item.replayUserNickname }}</span>
                  <span>{{ item.content }}</span>
                  <span>{{ item.sendTime | formatTime }}</span>
                </div>
              </div>

              <div v-if="item.fromGender === 2 || item.fromGender === 0" class="comment_item">
                <div class="comment_content" style="display: inline-block; right: 70px; width: 75%; text-align: right;">
                  <span style="display: block; padding-bottom: 6px; text-align: right;">{{ item.fromUser }}</span>
                  <span>{{ item.content }}</span>
                  <span>{{ item.sendTime | formatTime }}</span>
                </div>
                <el-avatar :size="40" :src="item.content" style="display: inline-block; right: 20px; position: absolute;">
                  <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" alt="" />
                </el-avatar>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import TablePagination from '@/components/TablePagination'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions';
import { xhrAnalysisLiveChat, xhrAnalysisLiveChatDetail } from '@/api/account'
export default {
  name: 'OnlineChat',
  components: { TablePagination },
  data() {
    return {
      list: null,
      total: 0,
      daterangeValue: '',
      dialogLoading: true,
      dialogVisible: false,
      online_status_items: {
        1: '后台在线', 2: '前台在线'
      },
      chatDetail: null,
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      listQuery: {
        page: 1,
        limit: 100,
        startTime: null,
        endTime: null,
        userId: (this.$route.query && this.$route.query.id) || null
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      xhrAnalysisLiveChat(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.count
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    onCahtItem(row) {
      console.log(row)
      xhrAnalysisLiveChatDetail(
        {
          fromUser: row.fromUser,
          toUser: row.toUser
          // startTime: row.startTime
        }
      )
        .then(resp => {
          this.chatDetail = resp.data.list
          this.dialogVisible = true
          this.dialogLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.dialogLoading = false
        })
    },
    dataRefreh() {
      this.listLoading = true
      this.doSearch()
      this.$forceUpdate();
    }
  }
}
</script>

<style lang="scss" scoped>
.comment_content{
  position: absolute;
}
.children-item{
  margin-left: 20px;
}
.item-name{
  height: 70px;
}
.comment_item{
}
.el-dialog{
  overflow: auto;
}
</style>
